<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动元素外边距负值问题(float element Negative outer margin problem)</title>
  <!-- 
    在CSS中，当浮动元素设置负外边距时，可能会出现一些特殊的布局效果。
    浮动元素外边距负值的一些常见用法和注意事项： 
 
      1. 浮动元素外边距负值的作用： 
      - 浮动元素设置负外边距可以调整元素之间的间距，实现元素的重叠或错位效果。 
      - 可以通过负外边距来控制浮动元素与其他元素之间的间距，实现特定的布局需求。 
      
      2. 注意事项： 
      - 使用浮动元素负外边距时，需要考虑浮动元素与其他元素之间的相互影响，以避免布局混乱。 
      - 负外边距可能会导致元素重叠或错位，需要谨慎使用以确保布局效果符合预期。 
   -->
   <style>
     span, strong {
       float: left;
     }

     span {
       color: red;
       background-color: black;
     }

     strong {
       margin-left: -30px;
       color: blue;
     }
   </style>
</head>
<body>

  <span>my name span element</span>
  <strong>my name strong element</strong>
  
</body>
</html>